<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-rate
					class="rate"
					v-model="rate1"
				></pure-rate>
			</pj-demo>

			<!-- 自定义图标 -->
			<pj-demo title="自定义图标">
				<pure-rate
					class="rate"
					v-model="rate11"
					iconName="__follow"
					fillIconName="__follow-fill"
				></pure-rate>
				<pure-gap></pure-gap>
				<pure-rate
					class="rate"
					v-model="rate11"
					iconName="/static/images/i_001.png"
					fillIconName="/static/images/i_006.png"
				></pure-rate>
			</pj-demo>

			<!-- 滑动选择 -->
			<pj-demo title="滑动选择">
				<pure-rate
					class="rate"
					v-model="rate1"
					touchable
				></pure-rate>
			</pj-demo>

			<!-- 半星 -->
			<pj-demo title="半星">
				<pure-rate
					class="rate"
					v-model="rate2"
					allow-half
				></pure-rate>
			</pj-demo>

			<!-- 允许清除 -->
			<pj-demo title="允许清除">
				<pure-rate
					class="rate"
					v-model="rate3"
					clearable
				></pure-rate>
				<pure-gap></pure-gap>
				<pure-rate
					class="rate"
					v-model="rate4"
					clearable
					allow-half
				></pure-rate>
			</pj-demo>

			<!-- 只读 -->
			<pj-demo title="只读">
				<pure-rate
					class="rate"
					v-model="rate5"
					readonly
				></pure-rate>
			</pj-demo>

			<!-- 禁用 -->
			<pj-demo title="禁用">
				<pure-rate
					class="rate"
					v-model="rate6"
					disabled
				></pure-rate>
			</pj-demo>

			<!-- 自定义数量 -->
			<pj-demo title="自定义数量">
				<pure-rate
					class="rate"
					v-model="rate7"
					:count="8"
				></pure-rate>
			</pj-demo>

			<!-- 自定义默认颜色 -->
			<pj-demo title="自定义默认颜色">
				<pure-rate
					class="rate"
					v-model="rate8"
					default-color="blue"
				></pure-rate>
			</pj-demo>

			<!-- 自定义填充颜色 -->
			<pj-demo title="自定义填充颜色">
				<pure-rate
					class="rate"
					v-model="rate9"
					fill-color="blue"
				></pure-rate>
			</pj-demo>

			<!-- 自定义禁用颜色 -->
			<pj-demo title="自定义禁用颜色">
				<pure-rate
					class="rate"
					v-model="rate10"
					disabled-color="#666666"
					disabled
				></pure-rate>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const rate1 = ref(2.5);
	const rate2 = ref(2.5);
	const rate3 = ref(2.5);
	const rate4 = ref(2.5);
	const rate5 = ref(2.5);
	const rate6 = ref(2.5);
	const rate7 = ref(4.5);
	const rate8 = ref(4.5);
	const rate9 = ref(4.5);
	const rate10 = ref(4.5);
	const rate11 = ref(3.5);
</script>

<style lang="scss" scoped>
	.rate {
		font-size: 1.5em;
	}
</style>
